<template>
	<view class="content">
		<view class="titlebg">
			<view class="title_bg">
				<label class="title">消息标题</label>
			</view>
			<view class="inputbg">
				<input type="text" placeholder="请输入消息标题" v-model="msgtitle" />
			</view>
		</view>
		<view class="subtitlebg">
			<view class="title_bg">
				<label class="title">消息副标题</label>
			</view>
			<view class="inputbg">
				<input type="text" placeholder="请输入消息标题" v-model="msgsubtitle" />
			</view>
		</view>
		<view class="contentbg">
			<view class="title_bg">
				<label class="title">消息内容</label>
			</view>
			<view class="inputbg">
				<textarea class="msgtext" cols="100" rows="50" placeholder="请编写留言消息的内容" v-model="msgcontent"></textarea>
			</view>
		</view>
		<view>
			<view class="buttons">
				<button class="subBtn" type="primary" @click="sendMessageClick">发布新消息</button>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="关闭" confirmText="同意" title="通知"
					:content="alertTitle" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config.js';

	export default {
		data() {
			return {
				msgtitle: "",
				msgsubtitle: "",
				msgcontent: "",
				showClose: true,
				alertTitle: ""
			}
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type;
				this.$refs.alertDialog.open();
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				console.log('点击确认')
				this.sendMessage();
			},
			sendMessageClick() {
				if (this.msgtitle == null || this.msgtitle == "") {
					uni.showToast({
						title: "请输入消息的标题",
						icon: 'error'
					});
				} else {
					if (this.msgsubtitle == null || this.msgsubtitle == "") {
						uni.showToast({
							title: "请输入消息的副标题",
							icon: 'error'
						});
					} else {
						if (this.msgcontent == null || this.msgcontent == "") {
							uni.showToast({
								title: "请输入消息的内容",
								icon: 'error'
							});
						} else {
							this.dialogToggle("alertDialog");
							this.alertTitle = "是否确认发布新的消息？"
						}
					}
				}

			},
			sendMessage() {
				let addMsgURL = config.baseURL + "message/createmsg";
				uni.showLoading({
					title: "等待中..."
				})
				uni.request({
					url: addMsgURL,
					method: 'POST',
					header: {
						"Authorization": config.getToken()
					},
					data: {
						"msgtitle": this.msgtitle,
						"msgsubtitle": this.msgsubtitle,
						"msgcontent": this.msgcontent
					},
					success(res) {
						uni.hideLoading();
						console.log(res.data);
						if (res.data.isok == 1) {
							uni.showToast({
								title: "消息发布成功",
								icon: "success"
							});
							uni.navigateBack();
						} else {
							uni.showToast({
								title: "消息发布失败",
								icon: "error"
							});
						}
					},
					fail(res) {
						console.log(res.errMsg.error_code);
						uni.hideLoading();
						if (res.errMsg.error_code == 401) {
							uni.reLaunch({
								url: "/pages/login/login"
							})
						}
						uni.showToast({
							title: "消息发布失败",
							icon: "error"
						})
					}
				})
			}
		}
	}
</script>

<style>
	.title_bg {
		width: 710rpx;
		margin: 20rpx;
	}

	.inputbg {
		width: 710rpx;
		margin: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 15rpx;
		border-width: 3rpx;
		border-style: solid;
		border-color: #7e7e7e;
	}

	.msgtext {
		width: 690rpx;
		margin: 10rpx;
	}

	input {
		width: 690rpx;
		margin: 10rpx;
	}

	.buttons {
		width: 710rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-items: center;
	}

	.subBtn {
		width: 650rpx;
	}
</style>